<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<cpn>

</cpn>

<div id="app">
  <cpn2></cpn2>

  <!-- 1. 无效找不到 -->
  <!-- <cpn1></cpn1> -->
</div>



  
<script src="../js/vue.js"></script>
<script>
  // 1. 创建第一个组件（子组件）
  const cpnC1 = Vue.extend({
    template: 
    `
    <div>
      <h2>我是标题1</h2>
      <p>我是内容2..</p>
    </div>
    `,
  });

  // 2. 创建第二个组件（父组件）
  const cpnC2 = Vue.extend({
    template: 
    `
    <div>
      <h2>我是标题2</h2>
      <p>我是内容2..</p>
      <cpn1></cpn1>
    </div>
    `,
    // 2. 在内部注册第一个组件
    components:
    {
      cpn1: cpnC1,
    }
  });

  // 2. 注册组件(全局组件，意味着可以在多个Vue的实例下面使用)
  const app = new Vue({
    el: '#app',
    data: 
    {
      message: '你好呀',
    },
    // 2. 在Vue注册第二个组件，因为第一个组件是在第二个组件中注册的，所以注册第二个组件就意味着将第一个逐渐以
    components: 
    {
      cpn2: cpnC2,
      
    }
  })
</script>
</body>
</html>